<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
   <title>股市舆情可视化</title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="../static/js/StockVisual/echarts.js"></script>
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">
                        <span class="glyphicon glyphicon-home" aria-hidden="true"></span> 股市舆情可视化 <span class="label label-default">Alpha</span>
                    </a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                    <li><a href="/"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 历史交易行情</a></li>
                    <li><a href="/wordcloud"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 股票舆情云图</a></li>
                    <li><a href="/dicopinion"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 情感字典舆情统计</a></li>
                    <li class="active"><a href="/nbopinion"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span> 机器学习舆情预测</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="container"> 
      <h3 class="text-primary text-center">{{stock_name}}</h3>
    </div>

    <div class="container">
    <div class="panel panel-info">
      <div class="panel-heading">基于朴素贝叶斯情感预测</div>
      <div class="panel-body">
                   <div class="col-md-12 col-xs-12">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width:100%;height:400px;"></div>
                </div>
      </div>
    </div>
    </div>

   <script type="text/javascript">
    var dateCount = {{dateCount|safe}};

    var day1 = String(dateCount[0][0])+'月'+String(dateCount[0][1])+'日';
    var day2 = String(dateCount[1][0])+'月'+String(dateCount[1][1])+'日'
    var day3 = String(dateCount[2][0])+'月'+String(dateCount[2][1])+'日'
    var day4 = String(dateCount[3][0])+'月'+String(dateCount[3][1])+'日'
    var day5 = String(dateCount[4][0])+'月'+String(dateCount[4][1])+'日'

    var myChart = echarts.init(document.getElementById('main'));
    // 基于准备好的dom，初始化echarts实例
    var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    option = {
        color: ['#191970', '#3fbf2b', '#e5323e', '#c0c0c0'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: [day1, day2, day3, day4, day5]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '积极情绪',
                type: 'bar',
                data: [dateCount[0][2],dateCount[1][2],dateCount[2][2],dateCount[3][2],dateCount[4][2]]
            },
            {
                name: '中等立场',
                type: 'bar',
                barGap: 0,
                data: [dateCount[0][4],dateCount[1][4],dateCount[2][4],dateCount[3][4],dateCount[4][4]]
            },
            {
                name: '消极情绪',
                type: 'bar',
                data: [dateCount[0][3],dateCount[1][3],dateCount[2][3],dateCount[3][3],dateCount[4][3]]
            },
            {
                name: '发帖总数',
                type: 'bar',
                data: [dateCount[0][5],dateCount[1][5],dateCount[2][5],dateCount[3][5],dateCount[4][5]]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
    <div class="container">
        <div class="col-md-12 col-xs-12">
            <a href="/" class="btn btn-default btn-block" role="button">返回首页</a>
        </div>
    </div>
</body>
</html>
